<template>
	<view class="search-container">
		<!-- 搜索条件 -->
		<view class="search-hd" @touchmove.stop.prevent>
			<u-form id="myForm" :model="form" :border-bottom="false" label-position="left" label-align="center" :label-width="160"
			 :label-style="labelStyle" ref="uForm">
				<u-form-item label="筛 选" class="my-form-item" style="padding-top: 30rpx;height: 118rpx;margin-top: 15rpx;">
					<u-input class="my-input-rp02name" v-model="form.rp02name" :height="98" type="select" placeholder="一级销区"
					 :select-open="show" @tap="showFn()" />
					<u-input class="my-input-rp03name" v-model="form.rp03name" :height="98" type="select" placeholder="二级销区"
					 :select-open="show2" @tap="show2Fn()" />
					<u-input class="my-input-brand" v-model="form.brand" :height="98" type="select" placeholder="品牌名称" :select-open="show3"
					 @tap="show3Fn()" />
				</u-form-item>
				<u-form-item label="门店名称" class="my-form-item">
					<input class="my-input-storeAddress" style="height: 98rpx;" v-model="form.storeName" type="text" placeholder="请输入" @input="change">
				</u-form-item>
				<u-form-item label="助店人员" class="my-form-item">
					<input class="my-input-createby" style="height: 98rpx;" v-model="form.createBy" type="text" placeholder="请输入" @input="changeName">
				</u-form-item>
			</u-form>
		</view>
		<!-- 搜索结果 -->
		<view class="store-rcord-list">
			<scroll-view 
				v-if="storeList.length > 0" 
				class="content" 
				scroll-y 
				style="width: 100%;height: 100%;"
				:scroll-top="scrollTop"
				@scroll="e => currentScrollTop = e.detail.scrollTop"
			>
				<!--  -->
				<view v-for="(item,index) in storeList" class="rcord-item" @click="goStoreRecordDetail(item)">
					<view class="rcord-item-user">
						<view class="user-info">
							<image :src="item.custAvatar"></image>
							{{item.custName}}
						</view>
						<view class="time">{{item.createTime && item.createTime.split(' ')[0]}}</view>
					</view>
					<view class="rcord-item-describe">
						<view class="label">销区：</view>
						<view class="contents">{{item.province}}—{{item.city}}</view>
					</view>
					<view class="rcord-item-describe">
						<view class="label">品牌：</view>
						<view class="contents">{{item.brandName}}</view>
					</view>
					<view class="rcord-item-describe">
						<view class="label">店面：</view>
						<view class="contents">{{item.storeName}}</view>
					</view>
					<view class="rcord-item-describe">
						<view class="label">是否生成待办：</view>
						<view class="contents">{{item.isGenerate === 'Y' ? '是' : '否'}}</view>
					</view>
					<!-- <template v-if="item.isGenerate === 'Y'">
						<view class="rcord-item-describe">
							<view class="label">是否生成待办：</view>
							<view class="contents">{{item.isGenerate === 'Y' ? '是' : '否'}}</view>
						</view>
					</template> -->
				</view>
				<u-loadmore 
					:status="loadMoreStatus" 
					@loadmore="handleLoadMore" 
					:load-text="loadText" 
					:bg-color="loadMoreStatus !== 'loading' ? '#F4F5F7' : '#fff'"
					:style="`height: 88rpx;background: ${loadMoreStatus !== 'loading' ? '#F4F5F7' : '#fff'};`"/>
			</scroll-view>
			<!-- 暂无数据 -->
			<view v-if="storeList.length == 0" class="none-record">暂无记录</view>
		</view>
		<!-- 筛选弹出框 -->
		<u-picker mode="selector" class="my-u-picker" v-model="show" @confirm="actionSheetCallback" :range="actionSheetList"
		:z-index="9999" range-key="rp02name"></u-picker>
		<u-picker mode="selector" class="my-u-picker" v-model="show2" @confirm="actionSheetCallback2" :range="actionSheetList2"
		 :z-index="9999" range-key="rp03name"></u-picker>
		<u-picker mode="selector" class="my-u-picker" v-model="show3" @confirm="actionSheetCallback3" :range="actionSheetList3"
		 :z-index="9999" range-key="brand"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getRp02nameList,
		getRp03nameList,
		getBrandList,
		getTaskExtConfigList
	} from '../../common/service.js'

	export default {
		data() {
			return {
				labelStyle: {
					'height': '98rpx',
					'color': '#666666',
					'font-size': '28rpx',
					'font-family': 'PingFangSC-Regular, PingFang SC',
					'font-weight': '400',
					'display': 'flex',
					'justify-content': 'space-between'
				},
				form: {
					rp02: '',
					rp02name: '',
					rp03: '',
					rp03name: '',
					brandCode: '',
					brand: '',
					storeName: '',
					createBy: '',
				},
				show: false,
				show2: false,
				show3: false,
				actionSheetList: [],
				actionSheetList2: [],
				actionSheetList3: [],
				storeList: [],
				nearStoreList: [],
				tempValue:'',
				scrollTop: 0,
				currentScrollTop: 0,
				loading: false,
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'loadmore',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '暂无更多数据'
				}
			}
		},
		onLoad: function(option) {
			// this.stop()
			this.queryStoreList()
		},
		onShow: function() {
			
		},
		methods: {
			// 阻止页面滚动
			stop(){
				var box=function(e){passive: false ;};
				document.body.style.overflow='hidden';
				document.addEventListener("touchmove",box,false);
			},
			// 允许页面滚动
			move(){
				var box=function(e){passive: false };
				document.body.style.overflow=''; // 出现滚动条
				document.removeEventListener("touchmove",box,false);
			},
			handleLoadMore() {
				if (this.loading) return;
				this.pageNo++;
				this.queryStoreList();
			},
			refreshData() {
				this.pageNo = 1;
				// 页面滚动到顶部
				this.scrollTop = this.currentScrollTop;
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				this.queryStoreList();
			},
			// 筛选条件后查询的列表数据
			queryStoreList() {
				const that = this;
				const pageNo = this.pageNo;
				const params = {
					rp02name: that.form.rp02name || '',
					rp03name: that.form.rp03name || '',
					brandCode: that.form.brandCode || '',
					brand: (that.form.brand === '全部品牌' ? '' : that.form.brand?that.form.brand:''),
					storeName: that.form.storeName || '',
					createBy: that.form.createBy || '',
					pageNum: pageNo,
					pageSize: this.pageSize,
				};
				this.tempValue = that.form.storeName?that.form.storeName:''
				this.loading = true;
				this.loadMoreStatus = 'loading';
				getTaskExtConfigList(params, function(resuser) {
					that.loading = false;
					that.loadMoreStatus = 'loadmore';
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							const { rows: list = [], total} = rs;
							that.storeList = pageNo === 1 ? list : [...that.storeList, ...list];
							// 当列表数量等于总数时
							if (that.storeList.length >= total) {
								that.loadMoreStatus = 'nomore';
							}
							that.storeList.length === 0 ? that.stop() : that.move();
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取门店信息记录列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					} else {
						console.log('模拟数据')
					}
				}, function(e) {
					that.loadMoreStatus = 'loadmore';
					that.loading = false;
				});
			},
			
			// 获取用户id
			getCode: function() {
				return this.CONFIG.user.id;
			},
			
			change: function(name) {
				const that = this;
				// 发起请求2，进行条件搜索门店
				this.form.storeName = name.detail?name.detail.value:name;
				if(this.form.storeName!=this.tempValue){
					this.refreshData();
				}
			},
			
			changeName: function(name) {
				// 发起请求2，进行条件搜索门店
				this.form.createBy = name.detail?name.detail.value:name;
				this.refreshData();
			},
			
			// 点击一级销区
			showFn() {
				const that = this;
				if (that.actionSheetList.length > 0) {
					that.show = true;
				} else {
					const params = {
						code: that.getCode()
					};
					getRp02nameList(params, function(resuser) {
						if (resuser && resuser.statusCode == 200) {
							const rs = resuser.data;
							console.log('一级销区列表结果:',rs);
							if (rs.code == 200) {
								that.actionSheetList = rs.data || [];
								if (that.actionSheetList.length > 0) {
									that.actionSheetList.forEach(function(item) {
										item.text = item.rp02name || '';
									})
								}
								that.show = true;
							} else {
								if (rs.msg) {
									that.$refs.uToast.show({
										title: rs.msg || '获取一级销区列表失败',
										type: 'error',
										duration: 3000,
										callback: function() {
											return;
										}
									});
								} else {
									that.$refs.uToast.show({
										title: rs.errMsg || '获取一级销区列表失败',
										type: 'error',
										duration: 3000,
										callback: function() {
											return;
										}
									});
								}
							}
						}
					}, function(e) {
						console.log('获取一级销区列表失败:',e);
					});
				}
			},
			
			// 点击一级销区回调，查询可选的二级销区
			actionSheetCallback(e) {
				const index = e[0];
				const that = this;
				that.form.rp02 = that.actionSheetList[index].rp02;
				that.form.rp02name = that.actionSheetList[index].rp02name;
				that.form.rp03 = '';
				that.form.rp03name = '';
				that.form.brand = '';
				that.form.brandCode = '';
				that.form.storeName = '';
				// 查询可选的二级销区
				const params = {
					rp02: that.form.rp02
				};
				// 一级销区查询数据
				this.refreshData();
				that.show2Fn()
				
				getRp03nameList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							that.actionSheetList2 = rs.RP03 || [];
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取二级销区列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取二级销区列表失败:',e);
				});
			},
			
			// 点击二级销区
			show2Fn() {
				const that = this;
				if (that.form.rp02name.length > 0) {
					if (that.actionSheetList2.length > 0) {
						that.show2 = true;
					} else {
						const params = {
							rp02: that.form.rp02
						};
						getRp03nameList(params, function(resuser) {
							if (resuser && resuser.statusCode == 200) {
								const rs = resuser.data;
								if (rs.code == 200) {
									that.actionSheetList2 = rs.RP03 || [];
									that.show2 = true;
								} else {
									if (rs.msg) {
										that.$refs.uToast.show({
											title: rs.msg || '获取二级销区列表失败',
											type: 'error',
											duration: 3000,
											callback: function() {
												return;
											}
										});
									}
								}
							}
						}, function(e) {
							that.$refs.uToast.show({
								title: '获取二级销区列表失败',
								type: 'error',
								duration: 3000,
								callback: function() {
									return;
								}
							});
						});
					}
				} else {
					that.$refs.uToast.show({
						title: '请先选择一级销区',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
				}
			},
			
			// 点击二级销区回调
			actionSheetCallback2(e) {
				const index = e[0];
				this.form.rp03 = this.actionSheetList2[index].rp03;
				this.form.rp03name = this.actionSheetList2[index].rp03name;
				this.form.brand = '';
				this.form.brandCode = '';
				this.form.storeName = '';
				this.show3Fn()
				this.refreshData();
			},
			
			// 点击品牌名称
			show3Fn() {
				const that = this;
				const params = {
					rp02: that.form.rp02,
					rp03: that.form.rp03
				};
				getBrandList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							const arr = [{
								brandCode: '',
								brand: '全部品牌'
							}];
							const arr2 = rs.brand || [];
							that.actionSheetList3 = arr.concat(arr2);
							that.show3 = true;
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取助店任务记录失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取品牌列表失败:',e);
				});
			},
			
			// 点击品牌名称回调
			actionSheetCallback3(e) {
				const index = e[0];
				this.form.brandCode = this.actionSheetList3[index].brandCode;
				this.form.brand = this.actionSheetList3[index].brand;
				this.form.storeName = '';
				// 查询门店列表
				this.refreshData();
			},
			
			// 助店详情
			goStoreRecordDetail(item){
				console.log(item)
				uni.navigateTo({
					url: `../storeRcordDetail/index?taskId=${item.taskId}`
				});
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.search-container {
		background-color: #F3F5F7;
	}

	.search-hd {
		position: fixed;
		left: 0;
		top: 20rpx;
		width: 750rpx;
		height: 480rpx;
		background: linear-gradient( 180deg, rgba(255,255,255,0.98) 0%, #FFFFFF 82%, rgba(255,255,255,0) 100%);
		border-radius: 30rpx 30rpx 0px 0px;
	}

	#myForm {
		width: 100%;
		height: 452rpx;
	}

	.search-bd {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 526rpx;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.my-input-rp02name {
		width: 150rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
	}

	.my-input-rp03name,
	.my-input-brand {
		width: 150rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		margin-left: 10rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
	}

	.my-input-brand {
		margin-right: 30rpx;
	}
	.my-input-createby{
		width: 540rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
		margin-right: 30rpx;
		margin-top: 0;
	}
	.my-input-storeAddress {
		width: 540rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
		margin-right: 30rpx;
		margin-top: 26rpx;
	}

	.my-u-picker {
		position: fixed;
		z-index: 99 !important;
	}
	/* 列表数据 */
	.store-rcord-list{
		position: fixed;
		top: 480rpx;
		left: 0;
		right: 0;
		padding: 0 20rpx;
		height: calc(100% - 480rpx);
		
		.rcord-item{
			width: 710rpx;
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			&-user{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25rpx;
				.user-info{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #000000;
					display: flex;
					align-items: center;
					image{
						width: 60rpx;
						height: 60rpx;
						border-radius: 30rpx;
						margin-right: 20rpx;
					}
				}
				.time{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			&-describe{
				padding: 4rpx 0;
				display: flex;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				.label{
					color: #999999;
					min-width: 90rpx;
				}
				.contents{
					line-height: 40rpx;
					// white-space:nowrap;
					// text-overflow:ellipsis;
					// overflow:hidden; 
				}
			}
		}
	}
	.none-record{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
		padding-top: 534rpx;
		background: url('../../static/toStore/storeRcord-none.png') no-repeat center 213rpx;
		background-size: 460rpx 319rpx;
		text-align: center;
	}
</style>
